<template>
  <div class="home">
     <!-- <el-button type="danger">hello</el-button>
     <i class="fa fa-user"></i> -->
        <Header />
        <el-container class="content">
            <Menu />
          <el-container>
            <el-main>
              <Breadcrumb />
              <div class="cont">
                <router-view />
              </div>
            </el-main>
            <el-footer><Footer /></el-footer>
          </el-container>
        </el-container>
  </div>
</template>

<script>
import Breadcrumb from '@/components/common/Breadcrumb'
import Header from '@/components/common/Header'
import Menu from '@/components/common/Menu'
//import Footer from '@/components/common/Footer'
export default {
  name: 'Home',
  components:{
    Header,Menu,Breadcrumb,
    // 组件濑加载
    // import 方式
    "Footer":()=>import("@/components/common/Footer")
    // require 方式
    //"Footer":resolve=>require(['@/components/common/Footer'],resolve)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  <style lang="less"> -->
<!-- meyerweb.com/eric/tools/css/reset/ -->
<style lang="less" scoped>
.home{
  .content{
    position:absolute;
    width:100%;
    top:60px;
    bottom:0;
    .cont{
      margin-top:20px;
    }
  }
  // .el-button{
  //    color:blue;
  // }
}
</style>
